:global {
  #hosts-group {
    @h: 160px;

    position: relative;
    margin-top: 20px;
    height: @h + 2px;
    overflow: auto;

    &::after {
      content: '';
      clear: both;
    }

    .arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      transform: translate(-50%, -50%);

      //&::after {
      //  content: '→';
      //}
    }

    .hosts-group-list {
      height: @h;
      overflow: auto;
      border: solid 1px var(--swh-border-color);
      border-radius: 2px;

      &:hover {
        border-color: var(--swh-border-color-hover);
      }

      .hosts-item {
        cursor: move;
        padding: 2px 6px;
        line-height: 24px;

        &:hover {
          background: var(--swh-bg-color-hover);
        }

        span[role=img] {
          font-size: 12px;
          color: var(--swh-font-color-weak);
        }

        & > span {
          padding-left: 6px;
        }
      }
    }
  }

  #hosts-group-valid {
    width: 45%;
    float: left;
  }

  #hosts-group-current {
    width: 45%;
    float: right;
  }
}
